<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="admin/common/html/tableHead :: head(~{::title},~{::link},~{::style})">

    <title th:text=${title}></title>
    <!-- 这儿引用单独的css link -->
    <!-- Ladda for Bootstrap 3按钮加载进度插件 -->
    <link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
    <!-- bootstrap-table表单样式 -->
    <link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <!-- 用户界面自定义css -->
    <link th:href="@{/static/admin/user/css/user-add.css}" rel="stylesheet"/>
    <style type="text/css"></style>
</head>

<style>
    .tips{text-align: center}
</style>
<body>

<div class="content-wrap">
    <div class="row">
    <div class="col-sm-12">
        <div class="nest" id="elementClose">
            <div class="">
            </div>
            <div class="body-nest" id="element">
                <div class="panel-body">
                    <input class="form-control"  type="text" id="appealType"  name="appealType" th:value="${{openid}}"/>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-12">
        <input id="fileupload" type="file" name="files[]" multiple>

    </div>
</div>
</div>

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">

</div>

<!--upload-->
<script th:src="@{/static/js/jquey-2.2.3.min.js}"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script th:src="@{/static/jQuery-File-Upload-master/js/vendor/jquery.ui.widget.js}"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script th:src="@{/static/jQuery-File-Upload-master/js/jquery.iframe-transport.js}"></script>
<!-- The basic File Upload plugin -->
<script th:src="@{/static/jQuery-File-Upload-master/js/jquery.fileupload.js}"></script>
<!--upload- end->
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>


<!-- 弹窗 -->
<script  th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script  th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<!-- jqueryForm序列化 -->
<script  th:src="@{/static/js/jqueryFormSerializeJson.js}" type="text/javascript"></script>
<!--引入自定义的下拉选框-->
<script th:src="@{/static/js/self_select.js}" type="text/javascript"></script>
<script type="text/javascript">

    $(function(){
        $('#fileupload').fileupload({
            url: "/TFileController/uploadFile",
            dataType: 'json',
            done: function (e, data) {
                //$.each(data.result.file, function (index, file) {
                    //console.log("file",index)
                    $('<p/>').text(data.result.file.fileName).appendTo(document.body);
                //});
            }
        });
        $(".MyDate").datetimepicker({
            format: "yyyy-mm-dd hh:00:00",
            startDate: new Date(),
            autoclose: true,
            todayBtn: true,
            language: 'zh-CN',
            initialDate:new Date(),
            minView: 1
        });
        //初始化诉求类型选择器
        initSignalSelect("/web/getAppealTypeList","appealTypeDiv","","appealType");

        //获取诉求类型的值.并判断
        $("#appealTypeDiv").click(function () {
            if($('#appealType').val()){
                //清空formDiv
                $("#appealformDiv").empty()
                //获取诉求类型对象
                $.ajax({
                    type : "GET",
                    url : "/AppealTypeController/selectOne/"+$('#appealType').val(),
                    data : {},
                    async : false,
                    success : function(data) {
                        if(data.code==200){
                            var processKey = data.appealType.processKey;
                            //根据processKey查询对应的表单字段
                            $.ajax({
                                type : "GET",
                                url : "/web/getStartFormFieldList?processKey="+processKey,
                                data : {},
                                async : false,
                                success : function(data) {
                                    if(data.code==200){
                                        var formInfo = data.formInfo;
                                        var formFieldList = data.formFieldList;
                                        var html='<input id="formId" name="formId" type="hidden" value="'+formInfo.id+'"/>';
                                        $.each(formFieldList, function(i, item){
                                            var target="";
                                            var required = item.fieldRequired;
                                            var fieldType = item.fieldType;
                                            if(required == 1){
                                                if(fieldType == 'text'){
                                                    target = '<div class="form-group">'+
                                                        '<label class="col-sm-3 control-label ">'+item.fieldLabel+'</label>'+
                                                        '<div class="col-sm-8">'+
                                                        '<input class="form-control" required type="'+ item.fieldType +'" id="' +item.id +'" name="'+item.fieldName+'"/>'+
                                                        '</div>'+
                                                        '</div>'
                                                }else if(fieldType == 'textarea'){
                                                    target = '<div class="form-group">'+
                                                        '<label class="col-sm-3 control-label ">'+item.fieldLabel+'</label>'+
                                                        '<div class="col-sm-8">'+
                                                        '<textarea class="form-control" required type="'+ item.fieldType +'" id="' +item.id +'" name="'+item.fieldName+'"></textarea>'+
                                                        '</div>'+
                                                        '</div>'
                                                }

                                            }else{
                                                if(fieldType == 'text'){
                                                    target = '<div class="form-group">'+
                                                        '<label class="col-sm-3 control-label ">'+item.fieldLabel+'</label>'+
                                                        '<div class="col-sm-8">'+
                                                        '<input class="form-control" required type="'+ item.fieldType +'" id="' +item.id +'" name="'+item.fieldName+'"/>'+
                                                        '</div>'+
                                                        '</div>'
                                                }else if(fieldType =='textarea'){
                                                    target = '<div class="form-group">'+
                                                        '<label class="col-sm-3 control-label ">'+item.fieldLabel+'</label>'+
                                                        '<div class="col-sm-8">'+
                                                        '<textarea class="form-control" required type="'+ item.fieldType +'" id="' +item.id +'" name="'+item.fieldName+'"></textarea>'+
                                                        '</div>'+
                                                        '</div>'
                                                }

                                            }
                                            html =html + target;
                                        })
                                        $("#appealformDiv").append(' <label class="col-sm-12 tips " >对应的表单</label>')
                                        $("#appealformDiv").append(html)

                                    }
                                }
                            });
                        }
                    }
                });
            }else {
                //清空formDiv
                $("#appealformDiv").empty()
                $("#appealformDiv").append(' <label class="col-sm-12 tips " >请选择诉求类型</label>')
            }

        })


    })


    $("#form-add").validate({
       rules:{
            appealType:{
                required:true,
            },

        },
        submitHandler:function(form){
            add();
        }
    });

    /**
     * 用户添加方法
     */
    function add() {
        var dataFormJson=$("#form-add").serialize();
        $.ajax({
            cache : true,
            type : "POST",
            url : "/web/addAppealInstance",
            data : dataFormJson,
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                $.operate.saveSuccess(data);
            }
        });
    }


</script>


</body>


</html>
